<template>
	<el-form ref="form" :model="bg" label-width="55px">
		<el-form-item label="透明度">
		  <el-select v-model="bg.opacity" placeholder="请选择" @change="handleChange">
		    <el-option
		      v-for="(fs, key) in opa"
		      :key="key"
		      :label="fs"
		      :value="+key">
		    </el-option>
		  </el-select>
		</el-form-item>
	</el-form>
</template>

<script>
	import {
	  BG_OPACITY	
	} from '@/const/style-match.js'
	export default {
		name: 'UIOpacity',
		props: {
		  value: {
		    type: Object,
		    required: true
		  }
		},
		data() {
			const bg_opacity = this.value
			return {
				opa: BG_OPACITY,
				bg: {
				  opacity: bg_opacity.o
				}
			}
		},
		watch:{
			value:{
				handler(new_val,old_val){
					this.bg.opacity=new_val.o
				},
				deep: true,
			}
		},
		methods: {
		  handleChange () {
		    const bg = this.bg
		    this.$emit('change', {
		      key: 'opa',
		      value: {
		        o: bg.opacity
		      }
		    })
		  }
		}
	}
	
</script>

<style>
</style>
